<div [id]="question.getItemId(model)" [attr.tabindex]="question.getItemTabIndex(model)" [attr.data-sv-drop-target-ranking-item]="index" 
    [class]="question.getItemClass(model)"
    (keydown)="question.handleKeydown($event, model)"
    (pointerdown)="question.handlePointerDown($event, model, $any($event.currentTarget))"
    (pointerup)="question.handlePointerUp($event, model, $any($event.currentTarget))">
  <div tabindex="-1" style="outline: none;">
    <div [class]="question.cssClasses.itemGhostNode"></div>
    <div [class]="question.cssClasses.itemContent">
      <div [class]="question.cssClasses.itemIconContainer">
        <svg [class]="question.getIconHoverCss()">
          <use [attr.xlink:href]="question.dragDropSvgIcon"></use>
        </svg> 
        <svg [class]="question.getIconFocusCss()">
          <use [attr.xlink:href]="question.arrowsSvgIcon"></use>
        </svg> 
      </div>

      <div *ngIf="!unrankedItem && question.getNumberByIndex(index); else elseBlock" [class]="question.getItemIndexClasses(model)">{{ question.getNumberByIndex(index) }}</div>
      <ng-template #elseBlock><div [class]="question.getItemIndexClasses(model)">
        <svg>
          <use [attr.xlink:href]="question.dashSvgIcon"></use>
        </svg> 
      </div></ng-template>

      <ng-template [component]="{ name: question.itemComponent, data: { item: model, cssClasses: question.cssClasses } }"></ng-template>
    </div>
  </div>
</div>